:root {
    --color-theme: #16b777;
    --color-delete: #ff5722;
}

.element-container > .layui-tab-content {
    max-height: calc(100vh - 200px);
    overflow-y: scroll;
}

.element-container > .layui-tab-content > .layui-tab-item > .layui-form {
    border: 1px dashed var(--color-theme);
    cursor: pointer;
}

.element-container > .layui-tab-content > .layui-tab-item > .layui-elem-quote {
    border-left: 5px solid var(--color-theme);
}

.element-container > .layui-tab-content > .layui-tab-item > .layui-quote-nm {
    border-left: 5px solid #eee;
}

.element-container > .layui-tab-content > .form-item > :hover {
    border: 1px solid var(--color-theme);
}

.priview-container {
    border: 1px solid var(--color-theme);
}

.priview-container, .property-container {
    height: calc(100vh - 10px);
    overflow-y: scroll;
}


.element-container .layui-icon-delete {
    display: none;
}

.priview-container .layui-icon-delete {
    display: unset;
    position: absolute;
    left: 2px;
    top: 8px;
    color: var(--color-delete);
    cursor: pointer;
    z-index: 1;
}

.layui-btn .layui-icon-delete, .layui-btn-group .layui-icon-delete, .layui-laypage .layui-icon-delete, .layui-elem-field .layui-icon-delete, .inline-delete .layui-icon-delete {
    position: unset;
}


.layui-form .grid-demo {
    text-align: center;
    padding: 10px;
    font-size: 2rem;
}

.layui-form > .layui-col-xs3:nth-child(odd), .layui-form > .layui-col-xs4:nth-child(odd), .layui-form > .layui-col-xs6:nth-child(odd) {
    background-color: #fafafa;
}

.layui-form > .layui-col-xs3:nth-child(even), .layui-form > .layui-col-xs4:nth-child(even), .layui-form > .layui-col-xs6:nth-child(even) {
    background-color: #dddddd;
}